<template>
    <div id="look">
        <!-- 展示文章 -->
        <el-timeline>
            <!-- 
                timestamp：时间
                placement：为时间的位置
             -->
            <el-timeline-item v-for="Shuju in ListShuju" :key="Shuju.id" :timestamp="Shuju.time" placement="top" >
                <el-card>
                    <h4 @click="Drawer(Shuju)" class="H4">
                        <!-- 认真才能完成目标，认真比努力更重要 -->
                        {{Shuju.title}}
                    </h4>
                    <!-- 跳转到详情页面 detail.vue的页面 -->
                    <a href="#" @click="Detail(Shuju)">详情</a>
                    <p class="ContextList">{{Shuju.context}}</p>
                </el-card>
            <!-- 点击按钮展示右侧框 -->
            <!-- 
                direction="ltr"  左方向显示
                direction="rtl"  右方向显示
                direction="ttb"  顶部显示
                默认为右方向显示
            -->
            </el-timeline-item>
            
        </el-timeline>

        <!-- :title="newShuju.title" -->
        <el-drawer
            direction="rtl"
            custom-class="demo-drawer"
            v-model="drawer"
            lock-scroll="true"
            size="40%"
        >
            <div id="box">
                <!-- 标题 -->
                <div class="title">
                    <h4>{{newShuju.title}}</h4>
                    <div class="right">
                        <div>发布人：<span>{{newShuju.zuo}}</span> <br></div>
                        <div>
                            时间：<span>{{newShuju.time}}</span>
                        </div>
                    </div>
                </div>
                <!-- 图片 -->
                <div class="Img">
                    <img :src="newShuju.src" :alt="newShuju.title" :title="newShuju.title">
                </div>
                <!-- 内容 -->
                <div class="context">
                    <!-- <p>
                        {{newShuju.context}}
                    </p> -->
                    <p v-for="(item,index) in newContext" :key="index">
                        {{item}}
                    </p>
                    
                    
                </div>
            </div>
        </el-drawer>
            
    </div>
    
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import {User} from '@/api/List.js'
// 提示接口
import {ElLoad} from '@/Element-api/ElLoading.js'
import {Context} from '@/Element-api/context.js'
export default {
    setup(){
        const route = useRoute()
        const router = useRouter()
        const shuju = reactive({
            // 原先的数据
            ListShuju:[], // 存放 api 接口的数据
            // 存放 侧边栏的数据
            newShuju:[],
            newContext:[]
        })

        // 查询所有的文章
        User().then((res)=>{
            const {data} = res
            shuju.ListShuju = data
        }).catch((err)=>{
            console.log(err.message);
        })



        // 控制侧边框的显示与隐藏
        const drawer = ref(false)
        // 这是事件
        const Drawer = (sum)=>{
            // 把当前要显示的值赋值给 侧边栏的框的数据
            shuju.newShuju = sum
            // shuju.newContext = shuju.newShuju.context.split('\n')
            // 调用 封装格式化内容的接口
            shuju.newContext = Context(shuju.newShuju.context,'\n')
            drawer.value = true
        }

        // 跳转到详情的页面
        const Detail = (Shuju)=>{
            const loading = ElLoad('正在跳转至详情页面.....')
            setTimeout(()=>{
                loading.close()
                router.push({
                    path:'/detail',
                    query:Shuju
                })
            },1000)
        }
        



        return{
            Drawer,
            drawer,
            ...toRefs(shuju),
            Detail
        }
    }
}
</script>
<style lang="less" scoped>
    #look{
        width: 80%;
        height: auto;
        margin: 20px auto;
        margin-bottom: 120px;
        position: relative;
        .H4{
            width: 50%;
            font-size: 20px;
            cursor: pointer;
        }
        .H4:hover{
            color: rgb(0, 183, 255);
        }
        a{
            position: absolute;
            text-decoration: none;
            right: 50px;
            top: 40px;
            font-size: 18px;
            color: rgb(119, 119, 119);
        }
        a:hover{
            color: rgb(0, 183, 255);
        }
        .ContextList{
            margin-top: 20px;
            font-size: 16px;
           text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
    #box{
        width: 100%;
        position: absolute;
        top: 60px;
        // 标题
        .title{
            width: 100%;
            height: 110px;
            position: relative;
            h4{
                font-size: 20px;
                text-align: left;
                margin-bottom: 10px;
            }
            .right{
                width: 250px;
                float: right;
                position: absolute;
                right: 0;
                div{
                    margin-bottom: 15px;
                }
                span{
                    color: rgb(55, 96, 143);

                }
            }
            
        }
        // 图片
        .Img{
            width: 95%;
            height: 300px;
            margin-bottom: 30px;
            img{
                width: 98%;
                height: 100%;
            }
        }
        // 内容
        .context{
            width: 95%;
            height: 400px;
            overflow: auto;
            p{
                text-indent: 2rem;
                letter-spacing: 2px;
                padding: 5px 0px;
            }
        }
    }
</style>
